<!--
 * @Author: Charlie/彭旺
 * @email: 413157399@qq.com
 * @Date: 2022-06-23 09:36:45
-->
<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="150px">
      <el-form-item label="选择商家：">
        <el-select v-model="form.type" clearable placeholder="选择商家" class="filter-item" style="width: 160px">
          <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择商品：">
        <el-button type="primary" class="filter-item" size="small" @click="dialogTableVisible = true">选择商品信息</el-button>
      </el-form-item>
      <el-form-item label="已选商品信息：">
        <el-table ref="table" :data="forms" style="width: 100%;" :header-cell-style="{background: 'rgb(245,245,246)'}">
          <el-table-column :show-overflow-tooltip="true" prop="engine" label="商品名称" />
          <el-table-column :show-overflow-tooltip="true" prop="coding" label="缩略图" />
          <el-table-column :show-overflow-tooltip="true" prop="remark" label="所属分类" />
          <el-table-column :show-overflow-tooltip="true" prop="remark" label="金额" />
          <el-table-column :show-overflow-tooltip="true" prop="remark" label="操作" />
          <el-table-column :show-overflow-tooltip="true" prop="remark" label="明细" />
        </el-table>
      </el-form-item>
      <el-form-item label="标题:">
        <el-input v-model="form.tengxun_map_key" style="width: 370px;" />
      </el-form-item>
      <el-form-item label="点赞数：">
        <el-input v-model="form.tengxun_map_key" style="width: 370px;" />
      </el-form-item>
      <el-form-item label="封面图：">
        <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
          :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="商品视屏">
        <div><video style="width: 400px !important;height: 450px !important;" src="" controls></video>
        </div>
        <el-button type="primary" @click="fileChanges()">上传视屏</el-button>
        <input type="file" ref="fileUpload" hidden @change="fileChange($event)">
      </el-form-item>
      <el-form-item label="简介：">
        <el-input type="textarea" v-model="form.tengxun_map_key" style="width: 370px;" />
      </el-form-item>
      <el-form-item label="状态：">
        <el-radio v-model="form" label="1">审核通过</el-radio>
        <el-radio v-model="form" label="2">审核拒绝</el-radio>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary">保存内容</el-button>
        <el-button type="primary">返回</el-button>
        <el-button type="info">重置</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <div>商品信息列表</div>
      <div class="head-container">
        <el-select v-model="form.type" clearable placeholder="分类" class="filter-item" style="width: 160px">
          <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
        </el-select>
        <el-input v-model="form.name" clearable size="small" placeholder="商品名称" style="width: 160px;"
          class="filter-item" @keyup.enter.native="crud.toQuery" />
        <el-button type="primary">搜索</el-button>
      </div>
      <el-table :data="gridData" :header-cell-style="{background: 'rgb(245,245,246)'}">
        <el-table-column prop="date" label="商品名称" width="150"></el-table-column>
        <el-table-column prop="name" label="缩略图" width="200"></el-table-column>l

        <el-table-column prop="address" label="所属分类"></el-table-column>
        <el-table-column prop="address" label="金额"></el-table-column>
        <el-table-column prop="createTime" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini">选择商品</el-button>
            <el-button type="danger" icon="el-icon-close" size="mini" @click="open">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </el-dialog>
  </div>
</template>

<script src="@assets/lib/aliyun-upload-sdk/lib/es6-promise.min.js"></script>
<script src="@assets/lib/aliyun-upload-sdk/lib/aliyun-oss-sdk-6.17.1.min.js"></script>
<script src="@assets/lib/aliyun-upload-sdk/aliyun-upload-sdk-1.5.3.min.js"></script>
<script>
import CRUD, { presenter, header } from '@crud/crud'
import pagination from '@crud/Pagination'
// crud交由presenter持有
const defaultCrud = CRUD({ url: 'api/generator/tables' })
export default {
  name: 'Preview',
  mixins: [presenter(defaultCrud), header()],
  data() {
    return {
      form: {},
      rules: {},
      queryTypeOptions: [],
      dialogImageUrl: '',
      dialogVisible: false,
      gridData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      dialogTableVisible: false,
      forms: []
    }
  },
  components: { pagination },
  created() {
    // this.height = document.documentElement.clientHeight - 180 + 'px'
    // const tableName = this.$route.params.tableName
    // generator(tableName, 1).then(data => {
    //   this.data = data
    // }).catch(() => {
    //   this.$router.go(-1)
    // })
  },
  methods: {
    // 选择视屏
    fileChanges() {
      this.$refs.fileUpload.onchange
    },
    fileChange(e) {},

    // 点击上传，然后调用 startUpload 方法, 开始上传
    authUpload() {
      if (this.uploader !== null) {
        this.uploader.startUpload()
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>